<template>
  <div>
    <a-card title="年度工单排行榜" :bordered="false" :headStyle="{ padding: '0 15px', marginTop: '15px', border:0}" :body-style="{ padding: '0 10px'}" style="width:100%">
      <div class="overtimelinks-list">
        <ul class="overtimelinks-header">
          <li class="th0">坐席名称</li>
          <li class="th1">未完结</li>
          <li class="th2">未指派</li>
          <li class="th3">本月累计</li>
        </ul>
        <ul class="overtimelinks-body" v-for="(ranking,index) in sheetRankingData" :key="index" >
          <li class="td0">{{ ranking.name }}</li>
          <li class="td1">{{ ranking.unfinished }}</li>
          <li class="td2">{{ ranking.unassigned }}</li>
          <li class="td3">{{ ranking.mounted }}</li>
        </ul>
      </div>
    </a-card>
  </div>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
import $ from 'jquery'
export default {
  name: 'ChannelAnalysis',
  components: {
  },
  data () {
    return {
      sheetRankingData: [
        { name: 'XXXX001', unfinished: 140, unassigned: 180, mounted: 320 },
        { name: 'XXXX002', unfinished: 100, unassigned: 120, mounted: 220 },
        { name: 'XXXX003', unfinished: 98, unassigned: 50, mounted: 148 },
        { name: 'XXXX004', unfinished: 90, unassigned: 90, mounted: 180 },
        { name: 'XXXX005', unfinished: 60, unassigned: 80, mounted: 140 },
        { name: 'XXXX006', unfinished: 55, unassigned: 70, mounted: 125 },
        { name: 'XXXX007', unfinished: 40, unassigned: 60, mounted: 100 },
        { name: 'XXXX008', unfinished: 30, unassigned: 50, mounted: 80 }
      ]
    }
  },
  created () {
  },
  mounted () {
    this.slideUp($('.overtimelinks-list'))
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
    * 向上滚动特效
    * @param {*} event 
    * @param {*} config 
    */
    slideUp (event, config) {
      config = $.extend({
        li_h: 31,
        time: 2000,
        movetime: 1500
      }, config)

      // 向上滑动动画
      function autoani () {
        $('.overtimelinks-body:first', event).animate({
          'margin-top': -config.li_h
        }, config.movetime, function () {
          $(this).css('margin-top', 0).appendTo(event)
        })
      }
      // 自动间隔时间向上滑动
      var anifun = setInterval(autoani, config.time)
      // 悬停时停止滑动，离开时继续执行
      // $(event).children(".serviceidcount-body").hover(function () {
      $(event).hover(function () {
        clearInterval(anifun) // 清除自动滑动动画
      }, function () {
        anifun = setInterval(autoani, config.time) // 继续执行动画
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
  .page-wide{
    .overtimelinks-list{
      padding: 0 7px;
      // background: #111;
      opacity: 0.8;
      height: 200px;
      overflow: hidden;
      position: relative;
      margin-bottom: 10px;
      .overtimelinks-header{
        overflow: hidden;
        list-style: none;
        padding: 0;
        margin: 0;
        border-bottom: 2px solid #4b7797;
        font-size: 1.3rem;
        position: relative;
        z-index: 100000;
        background: #4b7797;
        li{
          float: left;
          height: 31px;
          line-height: 31px;
          padding:0 5px;
          color: #fff;
          font-size: 14px;
          position: relative;
          z-index: 100000;
        }
        .th0{
          float: left;
          width: 9%;
        }
        .th1{
          float: left;
          width: 45%;
        }
        .th2{
          float: left;
          width: 26%;
        }
        .th3{
          float: left;
          width: 20%;
        }
      }
      .overtimelinks-body{
        overflow: hidden;
        list-style: none;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid #4b7797;
        position: relative;
        z-index: 1000;
        li{
          float: left;
          padding:0 5px;
          height: 31px;
          line-height: 31px;
          font-size: 13px;
          color: #333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .td0{
          float: left;
          width: 9%;
        }
        .td1{
          float: left;
          width: 45%;
        }
        .td2{
          float: left;
          width: 26%;
        }
        .td3{
          float: left;
          width: 20%;
        }
      }
    }
  }
</style>
